<template>
  <div id="visualData10">
    <div class="gradient-divider">
      <div>烟草病害知识图谱</div>
    </div>
    <div class="button_box">
      <div></div>
      <button class="visualData4_button" role="button" @click="changeShow">更 多</button>
    </div>
    <div id="echartsTable"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "visualData10",
  mounted() {
    this.initChart();
  },
  methods: {
    changeShow() {
      window.location.href='https://chuyin.love/index'
    },
    initChart() {
      const chart = echarts.init(document.getElementById("echartsTable"));
      // 配置项
      const option = {
        tooltip: {
          formatter: (params) => {
            if (params.dataType === 'edge') {
              return `关系: ${params.data.label}`;
            } else {
              return `知识: ${params.data.name}`;
            }
          },
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 300,
              edgeLength: 100,
            },
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              fontSize: 12,
              color: '#00e4ff', // 节点文字颜色
            },
            edgeLabel: {
              show: true,
              formatter: '{c}',
              fontSize: 10,
              color: '#00e4ff', // 连接线文字颜色
            },
            data: [
              { name: 'Tobacco_disease', value: 1, symbolSize: 40, itemStyle: { color: '#00e4ff' } },
              { name: 'Tobacco_blight', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
              { name: 'Tobacco_cataplexy', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
              { name: 'Pathogens_and_Symptoms', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
              { name: 'Law_of_onset', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
              { name: 'Prevention_and_control_methods', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
              { name: 'Dry_up', value: 1, symbolSize: 30, itemStyle: { color: '#00bfbf' } },
            ],
            links: [
              { source: 'Tobacco_disease', target: 'Tobacco_blight', value: '有' },
              { source: 'Tobacco_disease', target: 'Tobacco_cataplexy', value: '有' },
              { source: 'Tobacco_blight', target: 'Pathogens_and_Symptoms', value: '有' },
              { source: 'Tobacco_blight', target: 'Law_of_onset', value: '有' },
              { source: 'Tobacco_blight', target: 'Prevention_and_control_methods', value: '有' },
              { source: 'Pathogens_and_Symptoms', target: 'Dry_up', value: '有' },
            ],
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#00bfbf' }, // 蓝绿色渐变起点
                  { offset: 1, color: '#00e4ff' }, // 蓝绿色渐变终点
                ],
              },
              width: 2,
              opacity: 0.8,
            },
          },
        ],
      };
      chart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#visualData10 {
  padding: 0 .2em;
}

#echartsTable {
  height: 320px;
  width: 100%;
}

.gradient-divider {
  display: flex; // 启用flex布局
  align-items: center; // 垂直居中
  // justify-content: center; // 水平居中（如果需要）
  height: 28px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  //margin-bottom: 5px;
  padding: 0 10px;
}

.button_box{
  display: flex;
  width: 100%;
  padding: 0 1rem;
  justify-content: space-between;

  .visualData4_button:hover {
    background-color: #1795bb;
  }

  .visualData4_button:active {
    background-color: #1795bb;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }

  .visualData4_button {
    padding: 0.4em .8em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #9fb9c4;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 5rem;
    height: 1.4rem;
    font-size: 1rem;
    line-height: .8rem;
  }

  .visualData4_button:before {
    content: "";
    background: linear-gradient(
        45deg,
        #5baee8,
        #06c0f8,
        #6d97b6
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-visualData4_button 20s linear infinite;
    transition: opacity 3s ease-in-out;
    border-radius: 10px;
  }

  @keyframes glowing-visualData4_button {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  .visualData4_button:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1e4577;
    left: 0;
    top: 0;
    border-radius: 10px;
  }
}

</style>
